import React, { useEffect, useState } from 'react'
import { Select, Row, Col, Skeleton } from 'antd'
import style from './Index.module.less'
import { getData } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'
import moment from 'moment'
import DepartmentDesktop from './components/Map/Index'
import ChartOne from './components/ChartOne/Index'
import ChartTwo from './components/ChartTwo/Index'
import ChartThree from './components/ChartThree/Index'
import ChartFour from './components/ChartFour/Index'
import ChartFive from './components/ChartFive/Index'
import ChartSix from './components/ChartSix/Index'
import GongHan from './components/GongHan/Index'
function getYearList (begin, end) {
  const l = []
  for (let i = end; i >= begin; i--) {
    l.push({ label: `${i}年`, value: i })
  }
  return l
}
async function initData (cy, setData, setLoading) {
  setLoading(true)
  const [e, d] = await awaitWrap(getData(cy))
  setLoading(false)
  if (e === null && d !== null) {
    setData(d)
  }
}
function Main () {
  const cy = moment().year()
  const years = getYearList(2000, cy)
  const [year, setYear] = useState(cy)
  const [data, setData] = useState({})
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    initData(year, setData, setLoading)
  }, [year])
  return (
    <div className={style.container}>
      <GongHan />
      <div className={style.header}>
        <div className={style['year-selector']}>
          <Select className={style.year} options={years} value={year} onChange={e => setYear(e)} />
          <span className={style['year-label']}>时间：</span>
        </div>
      </div>
      <div className={style.charts}>
        {
          loading && (
            <div className={style.loading}><Skeleton active /></div>
          )
        }
        {
          !loading && (
            <Row gutter={24}>
              <Col span={6}>
                <ChartOne data={data} ready={!loading} />
                <ChartTwo data={data} ready={!loading} />
                <ChartThree data={data} ready={!loading} />
              </Col>
              <Col span={12}>
                <DepartmentDesktop data={data} ready={!loading} />
              </Col>
              <Col span={6}>
                <ChartFour data={data} ready={!loading} />
                <ChartFive data={data} ready={!loading} />
                <ChartSix data={data} ready={!loading} />
              </Col>
            </Row>
          )
        }
      </div>
    </div>
  )
}

export default Main
